<template>
    <el-menu :default-active="defaultActive" :router="router" v-bind="$attrs" class="el-menu-vertical-demo">
        <template v-for="(val, key) in data" :key="key">
            <el-menu-item v-if="!val[children] || !val[children].length" :index="val[index]">
                <component v-if="val[icon]" :is="`el-icon-${toLine(val[icon])}`"></component>
                <span>{{ val[name] }}</span>
            </el-menu-item>
            <el-sub-menu v-if="val[children] && val[children].length" :index="val[index]">
                <template #title>
                    <component v-if="val[icon]" :is="`el-icon-${toLine(val[icon])}`"></component>
                    <span>{{ val[name] }}</span>
                </template>
                <el-menu-item v-for="(val1, key1) in val[children]" :key="key1" :index="val1[index]">
                    <component v-if="val1[icon]" :is="`el-icon-${toLine(val1[icon])}`"></component>
                    <span>{{ val1[name] }}</span>
                </el-menu-item>
            </el-sub-menu>
        </template>
    </el-menu>
</template>
<script lang="ts" setup>
import { PropType } from 'vue';
import { toLine } from '../../../utils';
let props = defineProps({
    // 导航菜单的数据
    data: {
        type: Array as PropType<any[]>,
        required: true
    },
    // 默认选中的菜单
    defaultActive: {
        type: String,
        default: ''
    },
    // 是否是路由模式
    router: {
        type: Boolean,
        default: false
    },
    // 键名
    // 菜单标题的键名
    name: {
        type: String,
        default: 'name'
    },
    // 索引的键名
    index: {
        type: String,
        default: 'index'
    },
    // 图标的键名
    icon: {
        type: String,
        default: 'icon'
    },
    // 子菜单的键名
    children: {
        type: String,
        default: 'children'
    }
})
</script>
<style lang="scss" scoped>
svg {
    margin-right: 4px;
    width: 1em;
    height: 1em;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
}
</style>